<template>
  <div class="main ub ub-ver">
    <NavBar title="签退"></NavBar>
    <map class="map" :scale="scale" :max-scale="18" :longitude="longitude" :latitude="latitude" :markers="markers" :circles="circles" :polyline="polyline" show-location />
    <button class="btn ub ub-pc" hover-class="activeBtn" @click="logout">确认签退</button>
  </div>
</template>
<script>
import service from '@/utils/http'
import { errDialog, loading } from '@/utils/util'
export default {
    filters: {
        numFormat(num) {
            return Number(num).toFixed(2);
        }
    },
    data() {
        return {
            scale: 15,
            longitude: 116.50,
            latitude: 40.00,
            circles: [],
            markers: [],
            polyline: []
        }
    },
    onLoad() {
        this.getData()
        uni.getLocation({
            type: 'gcj02',
            success: (res) => {
                this.longitude = res.longitude
                this.latitude = res.latitude
            },
            fail: () => {
                console.log("error")
            }
        })
    },
    methods: {
        getData() {
            service.post('/app/visit/getTodayNoCheckoutByStaffId').then(res => {
                this.customers = res.data
            })
        },
        signOut() {
            const obj = {
                longitude: this.longitude,
                latitude: this.latitude,
            }
            service.post('/app/visit/updateCheckOutTime', obj).then(res => {
                uni.showToast({title: '签退成功', icon: 'none'})
                uni.navigateBack()
            })
        }
    }
}

</script>
<style scoped>
.main{width: 100%; height: 100%;position: relative;}
.toper{ width: 100%; height: 290rpx;box-sizing: content-box;overflow: hidden;}
.map {
	width: 750upx;
	height: 100vh;
	margin: 0;
	padding: 0;
}
.btn {
  width: 670rpx;
  position: absolute;
  bottom: 40rpx;
  margin-bottom: 0;
  left: 40rpx;
  font-size: 30rpx;
  color: #fff;
  height: 88rpx;
  line-height: 88rpx;
  background: #3387FF;
}
.activeBtn{
  background-color: #5999E1;
}
</style>
